<template>
  <div class="page_mian">
    <div class="header_query">
      <div class="selete" @click="showPicker = true">{{ value1 }}</div>
      <van-search v-model="gjz" placeholder="请输入搜索关键词" />
    </div>
    <van-list
      v-model="loading"
      finished-text="没有更多了"
      :finished="finished"
      @load="onLoad"
    >
    <div class="list_for" v-for="item in datalist" :key="item.id">
        <div class="list_item">
            <div class="list_text">
                <div>{{item.titel}}</div>
                <div>{{item.nr}}</div>
                <div>{{item.time}}</div>
            </div>
            <div class="item_type">
                {{item.type}}
            </div>
        </div>
    </div>
    </van-list>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      finished: true,
      gjz: "",
      value1: "全部",
      showPicker: false,
      columns: [
        { text: "全部", value: 0 },
        { text: "待调解", value: 1 },
        { text: "已调解", value: 2 },
      ],
      datalist:[
          {
              id:1,
              titel:'调解标题',
              nr:'内容',
              type:'待调解',
              time:'2022-01-05'
          },
          {
              id:2,
              titel:'调解标题',
              nr:'内容',
              type:'待调解',
              time:'2022-01-05'
          },
          {
              id:3,
              titel:'调解标题',
              nr:'内容',
              type:'待调解',
              time:'2022-01-05'
          },
      ]
    };
  },
  methods: {
    onConfirm(val) {
      console.log(val);
      this.value1 = val.text;
      this.showPicker = false;
    },
    onLoad() {},
  },
};
</script>
<style scoped>
.page_mian {
    background-color: #f6f6f6;
}
.header_query {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.list_for {
    padding: 0.2rem;
}
.list_item {
    border-radius: 0.1rem;
    border: 0.02rem solid rgb(177, 177, 177);
    background-color: #fff;
    display: flex;
    justify-content: space-between;
     padding: 0.2rem;
}
.list_text {
    font-size: 0.3rem;
}
.item_type {
    font-size: 0.3rem;
    color: #666;
}
.selete {
  flex: 1;
  text-align: center;
  font-size: 0.3rem;
  color: #666;
}
.van-search {
  flex: 4;
}
</style>